<template>
  <div>
    <SearchContainer @search="getData" @reset="() => formRef.resetFields()">
      <a-form ref="formRef" class="form-style-flex" :model="formState">
        <a-form-item name="zjm" label="" class="w-72">
          <a-input v-model:value="formState.zjm" placeholder="单号/物品名称/助记码/物品编号" />
        </a-form-item>
        <a-form-item name="dateRange" label="调价日期" class="ml-3">
          <a-range-picker v-model:value="formState.dateRange" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
        </a-form-item>
        <a-form-item name="statusList" label="状态" class="w-64 ml-3">
          <a-select v-model:value="formState.statusList" mode="multiple" placeholder="请选择" :max-tag-count="2" class="" :options="statusOption" />
        </a-form-item>
      </a-form>
    </SearchContainer>
    <a-card class="mt-2">
      <div class="flex justify-start">
        <a-button class="mb-2" type="primary" @click="onAdd"> 新增 </a-button>
      </div>
      <BaseTable fill :data-source="tableData" :loading="loading" :scroll="{ x: 1800 }" column-code="00001176" :pagination="pagination" @change="onChangeTable">
        <template #bodyCell="{ column, index, record }">
          <template v-if="column.dataIndex === 'xh'">
            {{ index + 1 }}
          </template>
          <template v-if="column.dataIndex === 'effectiveTime'">
            {{ dayjs(record.effectiveTime).format('YYYY-MM-DD') }}
          </template>
          <template v-if="column.dataIndex === 'id'">
            <PopoverTable :config="detailConfig" :params="{ adjustPriceId: record.id }">{{ record.id }}</PopoverTable>
          </template>
          <template v-if="column.dataIndex === 'status'">
            <a-tag v-if="record.status === 1" color="blue">待审核</a-tag>
            <a-tag v-if="record.status === 2" color="orange">待生效</a-tag>
            <a-tag v-if="record.status === 3" color="green">已生效</a-tag>
            <a-tag v-if="record.status === 4" color="red">已作废</a-tag>
          </template>

          <template v-if="column.dataIndex === 'action'">
            <a-space>
              <a-button type="link" size="small" :disabled="record.status !== 1" @click="onDetail(record)">明细</a-button>
              <a-button type="link" size="small" :disabled="record.status !== 1" @click="onEdit(record)">修改</a-button>
              <BaseButton v-if="record.status === 1" confirm-text="确认审核?" type="link" size="small" @click="onConfirm(record, 2)"> 审核 </BaseButton>
              <BaseButton
                v-if="record.status === 2 || record.status === 4"
                :disabled="record.status !== 2"
                confirm-text="确认撤审?"
                type="link"
                size="small"
                @click="onConfirm(record, 1)"
              >
                撤审
              </BaseButton>
              <TableMoreButton>
                <BaseButton confirm-text="确认作废?" type="text" danger size="small" :disabled="record.status !== 1" @click="onConfirm(record, 4)">
                  作废
                </BaseButton>
              </TableMoreButton>
            </a-space>
          </template>
        </template>
      </BaseTable>
    </a-card>
    <AddModal v-model:open="open" :row-data="rowData" @success="getData" @ok="getData" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import dayjs from 'dayjs'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import SearchContainer from '@/components/SearchContainer'
import BaseButton from '@/components/BaseButton'
import { post } from '@/utils/request'
import AddModal from './AddModal.vue'

const router = useRouter()
const rowData = ref(null)
const formRef = ref(null)
const open = ref(false)
const statusOption = ref([
  {
    label: '待审核',
    value: 1
  },
  {
    label: '待生效',
    value: 2
  },
  {
    label: '已生效',
    value: 3
  },
  {
    label: '已作废',
    value: 4
  }
])
const formState = ref({
  // dayjs(new Date().setDate(new Date().getDate() - 10)).format('YYYY-MM-DD')
  dateRange: [dayjs().subtract(10, 'day').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')],
  pxzd: '',
  pxlx: '',
  statusList: []
})
const { loading, tableData, pagination, getData } = useTable({
  url: '/oos/comprehenive/getPriceAdjustmentHeadList',
  immediate: true,
  params: formState.value
})
const detailConfig = ref({
  url: '/oos/comprehenive/getPriceAdjustmentDetailList',
  columnCode: '000162',
  rowKey: 'id',
  formatResult: (data) => {
    return data.map((item, index) => ({
      ...item,
      xh: index + 1
    }))
  }
})
const onChangeTable = (pagination, filters, sorter) => {
  if (sorter.column?.dataIndex) {
    formState.value.pxlx = sorter.order === 'ascend' ? '1' : '2'
    if (sorter.column.dataIndex === 'id') {
      formState.value.pxzd = '1'
    } else if (sorter.column.dataIndex === 'adjustTime') {
      formState.value.pxzd = '2'
    } else {
      formState.value.pxzd = '3'
    }
  } else {
    formState.value.pxlx = ''
  }
  getData()
}

const onDetail = (record) => {
  router.push({
    path: '/optic-warehouse/price/adjust-detail',
    query: {
      id: record.id
    }
  })
}
const onEdit = (record) => {
  rowData.value = Object.assign({}, record)
  open.value = true
}
const onAdd = () => {
  rowData.value = null
  open.value = true
}

const onConfirm = async (record, type) => {
  const { code, msg } = await post('/oos/comprehenive/doModifyPriceAdjustmentStatus', {
    id: record.id,
    status: type
  })
  if (code !== 0) return message.error(msg || '确认失败')
  getData()
  message.success(msg)
}
</script>
